<template>
	<view class="page">
		<view class="main">
			<view class="avatar-box" @click="handleCamera">
				<u-avatar :src="avatar" size="180rpx"></u-avatar>
				<image src="/static/icon/icon-camera.png" class="camera-icon" mode="aspectFit"></image>
			</view>
		</view>
		<view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
			<u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary, themeTertiary } = useTheme();

const avatar = ref('/static/image/img-math-bg.png')

const handleCamera = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			console.log(res)
			avatar.value = res.tempFilePaths[0]
		}
	})
}
</script>
<style scoped lang="scss">
.avatar-box {
	width: 180rpx;
	height: 180rpx;
	margin: 0 auto;
	border-radius: 100rpx;
	position: relative;
	margin-top: 240rpx;
}

.camera-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 54rpx;
	height: 54rpx;
}
</style>